<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="header/h5header::h5header('帅小铺-实体商户社群服务平台',
'/assets/layui/css/layui.css,/assets/H5/libs/index/css.css,/assets/H5/css/loaders.css',
'/assets/H5/libs/index/index.js,
/assets/H5/libs/index/dropload.js')">
</head>
<body>
<!-- 正文 -->
<div class="Headline">
    <div class="indexHeadline">
        <div class="Headline-header">
            <div class="header-logo">
                <a href="/" class="header-logoA">
                    <img src="/assets/H5/images/logo.png" alt=""/>
                </a>
                <input type="hidden" th:value="${resources.videoEtag}" id="videoEtag">
               <input type="hidden" th:value="${resources.articleId}" id="articleId"/>
            </div>
            <div class="header-column">
               <th:block th:if="${resources.collect}">
					<span class="header-followc" lay-event="collect_cancel" th:attr="data-articleId=${resources.articleId}">
						<i class="layui-icon layui-icon-star-fill" style="font-size: 0.4rem;color:#ff4200;"></i> 
						<span>已收藏</span>
					</span>
				</th:block>
				<th:block th:unless="${resources.collect}">
					<span class="header-followc" lay-event="collect" th:attr="data-articleId=${resources.articleId}">
						<i class="layui-icon layui-icon-star-fill" style="font-size: 0.4rem;"></i> 
						<span>收藏</span>
					</span>
				</th:block>
            </div>
        </div>
    </div>
    <!-- 推荐列表 -->
    <div class="conHeadline conSearch conSearchPad">
        <!-- 图文详情 -->
        <div class="textDetail">
            <!-- 图文title -->
			<div class="textDetail-title">
				<h1 class="textDetail-title-h1" th:text="${resources.title}"></h1>
				<div class="textDetail-title-d">
					<a class="textDetail-title-dL" th:href="${'/t/' + resources.user.userId}"> 
						<img class="textDetail-title-img" th:src="${resources.user.avatar}" alt="" /> 
						<span class="textDetail-title-s"></span>
						<div class="textDetail-title-dd">
							<p class="textDetail-title-s" th:text="${resources.user.nickName}"></p>
							<span class="textDetail-title-s2" th:text="${resources.user.label == null || resources.user.label == '' ? '暂无' : resources.user.label}"></span>
						</div>
					</a>
					<div class="textDetail-title-dR">
						<span class="textDetail-title-s" th:text="${#temporals.format(resources.updateTime,'yyyy-MM-dd HH:mm')}"></span>
					</div>
				</div>
			</div>
            <!-- 图文内容 -->
            <div class="textDetail-content" th:utext="${resources.content}"></div>
            
            <!-- 点赞 -->	
            <div class="GiveColl">
				<th:block th:if="${resources.vote}">
					<div class="GiveColl-like GiveColl-color" lay-event="vote_cancel" th:attr="data-articleId=${resources.articleId}">
						<i class="layui-icon layui-icon-praise" style="font-size: 0.4rem;color:#ff4200;vertical-align: middle;"></i>  
						<span class="GiveColl-likeS" th:text="${resources.voteSize}"></span>
					</div>
				</th:block>
			
				<th:block th:unless="${resources.vote}">
					<div class="GiveColl-like" lay-event="vote" th:attr="data-articleId=${resources.articleId}">
						<i class="layui-icon layui-icon-praise" style="font-size: 0.4rem;vertical-align: middle;"></i>  
						<span class="GiveColl-likeS" th:text="${resources.voteSize}"></span>
					</div>
				</th:block>
				
				<div class="GiveColl-like">
					<i class="layui-icon layui-icon-reply-fill" style="font-size: 0.4rem;vertical-align: middle;"></i> 
					<span class="GiveColl-likeS" th:text="${resources.commentNum}"></span>
				</div>
			</div>
			<!-- /点赞收藏 -->
			<!-- 评论消息 -->
	        <div class="CommentMsg">
	            <div class="blockMsg">
	                <div class="ReviewList" id="ppp">
					<!-- 评论 -->		
	                </div>
	            </div>
	
	            <div class="lite-page-editor">
	                <a th:href="'/h5/comment?id='+ ${resources.articleId}" class="lite-page-editor">发表评论</a>
	            </div>
	        </div>
	        <!-- /评论消息 -->
        </div>
    </div>
</div>

<script type="text/html" id="commres">
<div class="ReviewList-col">
	<div class="ReviewList-col-lf">
		<a class="ReviewList-col-lfA" href="/t/{{d.user.userId}}"> 
			<img alt="" src="{{d.user.avatar}}">
		</a>
	</div>
	<div class="ReviewList-col-rg">
		<div class="ReviewList-col-dir">
			<a class="ReviewList-col-dirA" href="/t/{{d.user.userId}}">{{d.user.nickName}}</a>
			<p class="ReviewList-col-dirP">{{d.content}}</p>
			<!-- 回复展示 -->
			<div style="background-color: #f2f2f2;">
				{{# layui.each(d.replyVos, function(index, item){ }}
					<div class="ReviewList-subText" style="border-top: 1px solid #d9d9d9;padding-bottom: 0.24rem;width: 96%;margin: 0 2%;min-height:1.2rem;">
						<p class="ReviewList-subTextP">
							<a class="ReviewList-subTextPa" href="/t/{{item.respondents.userId}}">{{item.respondents.nickName}}：</a>
							<span class="ReviewList-subTextPs2" >{{item.content}}</span>
							{{# if(item.support){ }}
								<a style="float: right;display: inline-block;margin-right: 0.2rem;color:#ff4200;width:0.6rem;" data-id="{{item.cid}}" href="javascript:;" lay-event="unpraise">
									<i class="layui-icon layui-icon-praise"></i>
									<i class="z-num">{{item.likes}}</i>
								</a>
							{{# } else { }}	
								<a style="float: right;display: inline-block;margin-right: 0.2rem;width:0.6rem;" href="javascript:;" data-id="{{item.cid}}" lay-event="praise">
									<i class="layui-icon layui-icon-praise"></i>
									<i class="z-num">{{item.likes}}</i>
								</a>
							{{#  } }}						
							<a style="float: right;display: inline-block;margin-right: 0.2rem;width:0.6rem;" href="/h5/reply?id={{d.articleId}}&pcid={{item.cid}}&acid={{d.cid}}&name={{item.respondents.nickName}}&touserId={{item.respondents.userId}}">回复</a>
							{{# if(item.own){ }}
								<a  style="float: right;display: inline-block;margin-right: 0.2rem;width:0.6rem;" data-id="{{item.cid}}" lay-event="del" href="javascript:;">删除</a>
							{{#  } }}
						</p>
					</div>
				{{# }); }}
			</div>
		</div>
		<div class="ReviewList-operation">
			<div class="ReviewList-operation-time">
				<span class="ReviewList-operation-timeS">{{d.time}}</span>
			</div>
			<div class="ReviewList-operation-time ReviewList-operation-click">
				{{# if(d.own){ }}
					<a class="ReviewList-operation-clickA ReviewList-delete" data-id="{{d.cid}}" lay-event="del" href="javascript:;">删除</a>
				{{#  } }}
				<a class="ReviewList-operation-clickA" href="/h5/reply?id={{d.articleId}}&pcid={{d.cid}}&acid={{d.cid}}&name={{d.user.nickName}}&touserId={{d.user.userId}}">回复</a>
				{{# if(d.support){ }}
					<a class="ReviewList-operation-clickA" style="color:#ff4200;" data-id="{{d.cid}}" href="javascript:;" lay-event="unpraise"><i class="layui-icon layui-icon-praise"></i><i class="z-num">{{d.likes}}</i></a>
				{{# } else { }}
					<a class="ReviewList-operation-clickA" href="javascript:;" data-id="{{d.cid}}" lay-event="praise"><i class="layui-icon layui-icon-praise"></i> <i class="z-num">{{d.likes}}</i></a>
				{{#  } }}
			</div>
		</div>
	</div>
</div>
</script>
<script src="https://cdn.jsdelivr.net/npm/xgplayer@1.1.4/browser/index.js" charset="utf-8"></script>
<script type="text/javascript">
layui.use(['form', 'ax', 'mynotice', 'admin', 'dataGrid', 'util'], function () {
	var form = layui.form;
    var $ax = layui.ax;
    var mynotice = layui.mynotice;
    var $ = layui.jquery;
    var admin = layui.admin;
    var dataGrid = layui.dataGrid;
    var util = layui.util;
    
    var etagsStr = $('#videoEtag').val();
    var uid = $('#uuserId').val();
    var avatar = $('#uavatar').val();
    var nickName = $('#unickName').val();
    var etags = [];
    if(etagsStr){
    	etags = JSON.parse(etagsStr);
    }
    $.each(etags, (i, v) => {
    	var elem = '#v_' + v;
    	var poster = $(elem).children("video").eq(0).attr('poster');
    	var src = $(elem).children("video").eq(0).children("source").eq(0).attr('src');
    	$(elem).html('');
    	$(elem).css("margin-bottom","10px");  
    	// 视频播放器
	        let player = new Player({
	    		"id": "v_" + v,
	    		"url": src,
	    		"playsinline": true,
	    		"whitelist": [
	    				""
	    		],
	    		"poster": poster,  // 封面
	    		"fluid": true,
	    		"x5-video-player-type": "h5"
	          });
    })
    
 	// 评论
    var ins = dataGrid.render({
        elem: '#ppp',  // 容器
        templet: '#commres',  // 模板
        url: '/zp/comment/list?id=' + $('#articleId').val(),  // 数据接口
        where:{userId: $('#authuserid').val()},
        loadMore: {
        			limit: 30,
        	 		text: '加载更多',
    	        	loadingText: '努力加载中...',
    	        	noMoreText: '我也是有底线的^_^',
    	        	errorText: '加载失败了v_v'
        		 },  // 开启分页
        done: function(res, curr, count){
        	//$('#userFollow').text(count);
        }
    });
    
    dataGrid.on('tool(ppp)', function (obj) {
        var data = obj.data;
        if (obj.event === 'unpraise') {
        	var cid = $(this).data('id');
        	var _that = this;
    	 	var zNum = $(this).find('.z-num').html();
    	 	var ajax = new $ax('/zp/commsup/unpraise/' + cid, 'post', function (res) {
      			zNum--;
      	        $(_that).find('.z-num').html(zNum);
      	      	$(_that).css("color","");
      	      	$(_that).attr("lay-event","praise");
        	}, function (res) {
        		mynotice.error(res.msg);
        	});
        	ajax.start();
        } else if (obj.event === 'praise') {
        	var cid = $(this).data('id');
        	var _that = this;
    		var zNum = $(this).find('.z-num').html();
    		var ajax = new $ax('/zp/commsup/praise/' + cid, 'post', function (res) {
    			zNum++;
    	        $(_that).find('.z-num').html(zNum);
    	        $(_that).css("color","#ff4200");
    	        $(_that).attr("lay-event","unpraise");
    	    }, function (res) {
    	    	mynotice.error(res.msg);
    	    });
    	    ajax.start();
        } else if(obj.event === 'del'){
        	var cid = $(this).data('id');
			var ajax = new $ax('/zp/comment/del/' + cid, 'delete', function (res) {
				window.location.reload()
		    }, function (res) {
		    	mynotice.error(res.msg);
		    });
		    ajax.start();
        }
    });
    
    util.event('lay-event', {
    	vote: function(){ // 点赞
    		var _that = this;
    		var ajax = new $ax('/api/zp/vote/' + $(_that).attr("data-articleId"), 'post', function (res) {
    				$(_that).attr('lay-event', 'vote_cancel');
    				var num = parseInt($(_that).children("span").text());
    				$(_that).children("span").text(num + 1);
    				$(_that).children("i").css('color', '#ff4200');
    				$(_that).addClass('GiveColl-color');
            }, function (res) {
            	mynotice.error(res.msg);
            });
            ajax.start();
    	},
    	vote_cancel: function() { // 取消点赞
    		var _that = this;
    		var ajax = new $ax('/api/zp/vote_cancel/' + $(_that).attr("data-articleId"), 'post', function (res) {
    				$(_that).attr('lay-event', 'vote');
    				var num = parseInt($(_that).children("span").text());
    				if(num > 0){
    					$(_that).children("span").text(num - 1);
    				}
    				$(_that).children("i").css('color', '');
    				$(_that).removeClass('GiveColl-color');
            }, function (res) {
            	mynotice.error(res.msg);
            });
            ajax.start();
    	},
    	collect: function(){ // 收藏
    		var _that = this;
    		var ajax = new $ax('/api/zp/collect/' + $(_that).attr("data-articleId"), 'post', function (res) {
    				$(_that).attr('lay-event', 'collect_cancel');
    				$(_that).css('color', '#ff4200');
    				$(_that).children("i").css('color', '#ff4200');
            }, function (res) {
            	mynotice.error(res.msg);
            });
            ajax.start();
    	},
    	collect_cancel: function() { // 取消收藏
    		var _that = this;
    		var ajax = new $ax('/api/zp/collect_cancel/' + $(_that).attr("data-articleId"), 'post', function (res) {
    				$(_that).attr('lay-event', 'collect');
    				$(_that).css('color', '');
    				$(_that).children("i").css('color', '');
            }, function (res) {
            	mynotice.error(res.msg);
            });
            ajax.start();
    	},
    })
    
    
});
</script>

</body>

</html>